<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录切换的小案例</title>
</head>
<script src="../js/vue.js"></script>
<body>

<div id="app">

    <p>
        这种情况会有一种弊端，就是在用户切换的时候，上一次输入的东西还在<br/>
        这种情况是由于vue的底层虚拟DOM导致的<br/>
        所以就会复用我们的组件<br/>
        要解决这种情况，就需要给每个组件加一个单独的，唯一的key值<br/>
        写法就是：key="username"或者key="email"
    </p>

    <span v-if="isUser">
    <label for="username">用户登录</label>
    <input type="text" id="username" placeholder="用户名称"/>
    </span>
    <span v-else>
        <label for="password">用户邮箱</label>
        <input type="text" id="password" placeholder="用户邮箱"/>
    </span>
    <button @click="change">切换</button>
</div>

</body>

<script>
    const vue = new Vue({
        'el': '#app',
        'data': {
            isUser: true
        },
        'methods': {
            change() {
                this.isUser = !this.isUser
            }
        }
    })
</script>
</html>